<template>
  <z-paging ref="paging" class="content"  v-model="listData" @query="queryList">

  <view class="top-filter-icon flexrowcenter" @click="open">
      <view class="text-black text-df margin-right-sm">日期筛选</view>
      <image class="top-icon" src="@/static/images/mine/filter.png"/>
    </view>
    <uni-popup ref="popup" background-color="#fff" type="top">
      <gx-drop-down-menu
          :initStartTime="startTime"
          :initEndTime="endTime"
          :initCurrentDate="componentCurrentDate"
          @change="changedate"/>
    </uni-popup>
  <uni-list-item v-for="policeItem in listData ">
    <template v-slot:body>
      <view class="flexcolumn margin-lr-sm flex1" >
        <view class="topBar">
          <view class="topBarleftIconContent" >
            <image class="topBarleftIcon" v-if="policeItem.handleStatic == 2"
                   src="@/static/images/common/need-handle.png"
            />
          </view>
          <view class="flexrow">
            <text :class="['text-df', getFontColor(policeItem.level)]" >{{ levelDes(policeItem)}}</text>

            <view v-if="policeItem.level" >
              <image  class="rightcontenticon"  src="@/static/images/common/height-police.png" v-if="policeItem.level == 1"></image>
              <image   class="rightcontenticon" src="@/static/images/common/low-police.png" v-else ></image>
            </view>
          </view>
        </view>

        <view class="flexrowcenter margin-top-sm">
          <text class=" text-df">报警时间</text>
          <text class="text-gray text-df margin-left">{{policeItem.ts |  dateFomatterYYYYMMDD}}</text>
        </view>
        <view class="flexrowcenter margin-top">
          <text class="text-df">
            <text class="text-orange">{{policeItem.slaveName}}</text>
            发生
            <text v-if="policeItem.level === 1 || policeItem.level === 2" :class="getFontColor(policeItem.level)">{{levelDes(policeItem)}}</text>
            ,浓度值:{{policeItem.data}}{{policeItem.propertyUnit}}</text>
        </view>
        <view class="flexrowflexend">
          <view class="bgblue-white-btn padding-tb-xs padding-lr-sm "    v-if="policeItem.handleStatic == 2"  @click='dealPolice(policeItem)'>开始处理</view>
          <view class="bgwhite-blue-btn   padding-tb-xs padding-lr-sm"   v-else  @click='dealRecordClick(policeItem)'>处理记录</view>
        </view>
      </view>
    </template>
  </uni-list-item>
  </z-paging>
</template>

<script>
import dayjs from "dayjs";
import {getpigHandlePage} from "@/api/police/index";

export default {
  data() {
    return {
      query:{},
      componentCurrentDate:0,
      dictMap : this.$store.state.dict.dictMap,
      listData:[],
      startTime:dayjs().format('YYYY-MM-DD'),
      endTime:dayjs().format('YYYY-MM-DD'),
    }
  },
  onLoad(query){
    this.query = query
  },
  filters: {
    dateFomatterYYYYMMDD (date) {
      return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : ''
    }
  },
  methods: {
    getFontColor(level) {
      if (level === 2) {
        return 'text-orange';
      } else if (level === 1) {
        return 'text-red';
      } else {
        return 'text-black';
      }
    },
    levelDes(policeItem){
      let level = policeItem.level
      let label = ''
      const alarm_type =   this.dictMap?.alarm_type || []
      alarm_type.map(item=>{
        if(item.value == String(level)){
          label = item.label
        }
      })
      return label
    },
    open() {
        this.$refs.popup.open('top')
    },
    dealRecordClick(policeItem){
      console.log('policeItem>>>',policeItem)
      //处理结果
      uni.navigateTo({
        url: `/pages/police/police-res/police-res?data=`+ encodeURIComponent(JSON.stringify(policeItem))
      })
    },
    dealPolice(policeItem) {
      console.log('policeItem>>>',policeItem)
      uni.navigateTo({
        url: `/pages/police/police-deal/police-deal?data=` + encodeURIComponent(JSON.stringify(policeItem))
      })
      uni.$once('refresh-police-list', ()=>{
        this.$refs.paging.refresh()
			})
    },
    changedate(data) {
         console.log('data>>>', data)
          this.startTime = data.startTime,
           this.endTime = data.endTime,
          this.componentCurrentDate = data.currentDate

      uni.showLoading({
        title: '请求中...',
      })
      this.$refs.popup.close()
      this.$refs.paging.refresh()
    },
    queryList(pageNo,pageSize){
      if (pageNo == 1) {
        uni.showLoading({
          title: "请求中...",
        })
      }
      const {deviceId} = this.query || {}
      getpigHandlePage({
        span:4,
        startTime:dayjs(this.startTime).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        endTime:dayjs(this.endTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
        size: pageSize,
        pages: pageNo,
        deviceId:deviceId,
      }).then(res => {
        uni.hideLoading()
        const records = res.data.records || []; // 读取 records 数据
        this.$refs.paging.complete(records);
      })
    },
  }
}
</script>

<style scoped>

.top-filter-icon {
  height: 40px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}


.top-icon {
  width: 20px;
  height: 20px
}

.rightcontenticon {
  width: 16px;
  height: 16px;
}
.topBar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.topBarleftIcon {
  height: 22px;
  width: 60px;
}
.topBarleftIconContent{
  text-align: center;
  vertical-align: middle;
  margin-top: -10px;
  margin-left: -20px;
}
</style>
